<!-- 单表配置项（柱状图） -->
<template>
  <el-form :inline="true" :model="form">
    <el-button @click="addSeries">+</el-button>
    <div class="series-item" v-for="(item, index) of form!.series" :key="item.id">
      <el-form-item>
        <el-button :icon="Delete" type="danger" @click="removeSeries(item.id)"></el-button>
      </el-form-item>

      <el-form-item label="柱状名称">
        <el-input v-model="item.name" />
      </el-form-item>
      <el-form-item label="柱状宽度">
        <el-input v-model="item.barWidth" />
      </el-form-item>
      <el-form-item label="柱状颜色">
        <el-color-picker v-model="item.itemStyle!.color" />
      </el-form-item>
      <el-form-item label="显示背景">
        <el-switch v-model="item.showBackground" />
      </el-form-item>

      <el-divider />

      <el-form-item label="显示数值">
        <el-switch v-model="item.label!.show" />
      </el-form-item>
      <el-form-item label="数值位置" v-if="item.label?.show">
        <el-select v-model="item.label!.position">
          <el-option v-for="item in positionSelectArray" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { chartStore } from '../../store/index'
import {
  Delete,
} from '@element-plus/icons-vue'

import { Series, LabelPosition } from '../../types/EChartsCommonConfig'
import { EChartsConfigForm } from '../../types/EChartsConfigForm'
import { chartDefaultConfig } from '../../types/EChartsTypes'

const store: any = chartStore()
const emits = defineEmits(['addSeries', 'removeSeries'])

let form: EChartsConfigForm = store.form
// 下拉项 [数值显示位置]
let positionSelectArray = Object.values(LabelPosition)


// 添加图表单独配置项
function addSeries() {
  const seriesItem: Series = chartDefaultConfig().BAR().series[0]
  emits('addSeries', seriesItem)
}

// 移除图表单独配置项
function removeSeries(id: number) {
  emits('removeSeries', id)
}
</script>

<style lang="less" scoped>
.series-item {
  background-color: #f6f6f6;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px 20px 0 20px;
  margin: 10px 0;
}

.el-divider--horizontal {
  margin: 10px 0;
}
</style>
